<template>
  <div class="conf-wrap module-conf">
    <el-row :gutter="10">
      <el-col :xs="12" :sm="6" :md="6" :lg="5" :xl="4">
        <el-card class="box-card" :body-style="{ height: 'calc(100% - 40px)', padding:'5px' }">
          <div slot="header" class="clearfix">
            <span>功能模块配置</span>
          </div>
          <div class="conf-content">
            <div v-for="item in list" :key="item.id + '-l'" class="tree-box">
              <div class="tree-head">
                <!-- 模拟CheckBox -->
                <span class="trangle" @click="handleCheck(item)"><i :class="['el-icon-caret-right', { 'rotate': isCheck[item.id] }]" /></span>
                <span>{{ item.name }}</span>
              </div>
              <el-collapse-transition>
                <div v-show="isCheck[item.id]" class="tree-body">
                  <!-- 左侧配置项的tree -->
                  <el-tree
                    :ref="'sideBarTree' + item.id"
                    :data="datalist[item.id]"
                    show-checkbox
                    node-key="id"
                    :default-expand-all="true"
                    :expand-on-click-node="false"
                    :default-checked-keys="defaultCheckedKeys[item.id]"
                  />
                </div>
              </el-collapse-transition>
            </div>
          </div>
          <div class="bottom clearfix">
            <el-button type="primary" class="primary-btn-style" plain @click="handleSave()">预览</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="18" :md="18" :lg="19" :xl="20">
        <el-card class="box-card" :body-style="{ height: 'calc(100% - 40px)' }">
          <div slot="header" class="clearfix">
            <span>效果预览</span><i class="tips">当鼠标变为 <i class="el-icon-rank" /> 时，按下可拖动模块</i>
          </div>
          <div v-loading="loading" class="preview-pad">
            <div class="navbar">
              <company-logo class="company-info" />
              <right-menu />
            </div>
            <dashboard-title :ptitle="title" />
            <section style="display:flex;flex-wrap:no-wrap;">
              <div class="sideLeft">
                <el-tree
                  :data="previewTree"
                  node-key="id"
                  accordion
                  :default-expand-all="true"
                  :expand-on-click-node="false"
                  empty-text=""
                />
              </div>
              <div class="sideRight screenPad" :class="{ 'line-img' : lineImg.isShow}">
                <!-- 循环引入组件 -->
                <article
                  v-for="(item, index) in dragList"
                  :key="item.id + '-r'"
                  :class="['tab-box', {cursorMove: item.isShow}]"
                  draggable="true"
                  @dragstart="handleDragStart($event, item)"
                  @dragover.prevent="handleDragOver($event, item)"
                  @dragenter="handleDragEnter($event, item)"
                  @dragend="handleDragEnd($event, item)"
                >
                  <h4 v-if="item.isShow" class="tab-box-head">{{ item.label }}<em><i /><i /></em></h4>
                  <div v-if="item.isShow" ref="boxbodywrap" class="tab-box-body">
                    <!-- 动态组件内容 -->
                    <component
                      :is="iscomponent(index)"
                      :isresize="isMove"
                    />
                  </div>
                </article>
              </div>
            </section>
          </div>
          <div class="bottom clearfix">
            <el-button type="primary" class="primary-btn-style" plain @click="handleImport()">导入</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CompanyLogo from '@/components/CompanyLogo'
import DashboardTitle from '@/components/DashboardTitle'
import RightMenu from '@/components/RightMenu'
import { AlarmTypes, AlertsInfo, Capacity, CurrentProduct, LineStatus, LiquidMedicine, LiveVideo, LowQuality, ParamsStatus, PersonnelAnalysis, ProductFeatures, YieldCount } from '@/components/Screen'
import { sortArrObj } from '@/utils'
import { defaultSideBar } from '@/api/default-apis' // 完整的默认的sidebar结构
import { getProcess, getAllLine, getConfigAll, updateConfig, insertConfig } from '@/api/conf'

export default {
  components: { CompanyLogo, DashboardTitle, RightMenu, AlarmTypes, AlertsInfo, Capacity, CurrentProduct, LineStatus, LiquidMedicine, LiveVideo, LowQuality, ParamsStatus, PersonnelAnalysis, ProductFeatures, YieldCount },
  data() {
    return {
      title: '',
      subTitle: '信息化系统',
      screenModule: [],
      nowTime: new Date(),
      loading: false,
      cursorMove: false,
      isMove: false,
      seconds: 3, // 退出登录通知倒计时 / 秒
      list: [],
      checkArray: [],
      isCheck: {},
      previewTree: [],
      // 存放功能模块tree数据
      datalist: {},
      // 当前选中的制程
      currentCheckedItem: {},
      dragging: null,
      dragList: [],
      chartStyleList: [],
      // 大屏底图
      lineImg: {},
      // 存放 已勾选保存后的 制程
      checkedProcessList: [],
      checkedProcessObj: {},
      // 存放已保存的功能模块配置，存入cookie
      alreadyChecked: {},
      // 0916
      pagePath: this.$route.path,
      allProcessList: [], // 所有制程
      allLinesList: [], // 所有产线
      configedProcessId: [], // 已配置的制程id的list
      allConfiged: {}, // 查到的所有的配置信息
      defaultCheckedKeys: {}, // 根据查到的配置，存放已勾选的tree节点id，用于生成tree控件时默认勾选 eg. {1: [1301,1302,1401,1402]}
      setScreenObj: {}, // 已设好的大屏 给后端的传参
      setMenuObj: {}, // 已设好的其他项
      setEquiList: [] // 已勾选的线别，用于解析成字符串 '1.0;2.1'
    }
  },
  watch: {
    isMove(newval, oldval) {
      this.isMove = newval
      // console.log('this.isMove=' + this.isMove)
    }
  },
  created() {
    this.getProcessList()
    this.getAllLineList()
    // 清除cookie
    this.$Cookies.remove('checkedProcessList')
    this.$Cookies.remove('checkedProcessObj')
    this.$Cookies.remove('alreadyChecked')
  },
  mounted() {
    // this.domResize()
    // this.setSize()
  },
  methods: {
    // 查所有制程
    getProcessList() {
      getProcess().then(res => {
        this.allProcessList = JSON.parse(JSON.stringify(res.data))
      })
    },
    // 查所有产线
    getAllLineList() {
      getAllLine().then(res => {
        this.allLinesList = JSON.parse(JSON.stringify(res.data))
        // 给产线增加label字段，值同name, 用于tree
        this.allLinesList.forEach(item => {
          item.label = item.name
          item.parentId = 120 // 设备管理的id(已写死)
          item.field = 'equi-' + item.id
          item.isShow = false
        })
      }).then(() => {
        this.getAllConfigList()
      })
    },
    getAllConfigList() {
      getConfigAll().then(res => {
        res.data.forEach(val => {
          let lineConf = 0 // 已配置的产线个数
          this.configedProcessId.push(val.regionid)
          // 说明： val.equi = '1.0;2.1'  => '线别id，是否配置；线别id，是否配置'
          const equiList = val.equi.split(';') // => ['1.0','2.1']
          equiList.forEach(item => {
            val['equi-' + item.split(',')[0]] = parseInt(item.split(',')[1])
            if (parseInt(item.split(',')[1]) === 1) {
              lineConf++
            }
          })
          // val.isShow = lineConf === this.allLinesList.length
          val['equi-all'] = lineConf === this.allLinesList.length ? 1 : 0 // 设备管理一级
          this.allConfiged[val.regionid] = val
        })
        // console.log('getConfigAll', this.allConfiged)
      }).then(() => {
        this.initDefaultTree()
      })
    },
    // 递归设置sidebar是否默认勾选
    setDeaultConf(processId, arr, defaultkeys) {
      arr.forEach(itemval => {
        itemval.isShow = this.allConfiged[processId][itemval.field] === 1
        // console.log(processId, itemval.field, this.allConfiged[processId][itemval.field], itemval.id, itemval.parentId)
        if (this.allConfiged[processId][itemval.field] === 1) {
          // 已配置的push进defaultkeys
          if (('' + itemval.id).length > 3) {
            defaultkeys.push(itemval.id)
          }
          if (itemval.parentId === 120) { // 设备管理
            defaultkeys.push(itemval.id)
          }
        }
        if (itemval.field === 'screen') {
          // 如果是大屏模块，给sort字段赋值，用于排序
          if (this.allConfiged[processId][itemval.sortStr] !== 0) {
            itemval.sort = this.allConfiged[processId][itemval.sortStr]
          }
        }
        if (Object.prototype.hasOwnProperty.call(itemval, 'children')) {
          this.setDeaultConf(processId, itemval.children, defaultkeys)
        }
      })
    },
    // 默认完整未设置的tree
    initDefaultTree() {
      defaultSideBar().then(defaultSidebar => {
        this.allProcessList.forEach(item => {
          const temp = JSON.parse(JSON.stringify(defaultSidebar)) // 默认
          temp[0].label += `(${item.name})`
          // temp[1] => 设备管理
          temp[1].children = this.allLinesList.filter(line => {
            return line.regionid === item.id
          })
          temp.forEach(val => {
            val.parentId = item.id
          })
          item.list = JSON.parse(JSON.stringify(temp))
        })
        this.allProcessList.forEach(item => {
          const defaultkeys = [] // 单个制程默认已勾选keys
          if (this.configedProcessId.indexOf(item.id) !== -1) { // 已配置，按实际修改temp
            this.setDeaultConf(item.id, item.list, defaultkeys)
            this.defaultCheckedKeys[item.id] = defaultkeys// defaultkeys
          }
          this.datalist[item.id] = item.list
          this.isCheck[item.id] = false
          // console.log(this.defaultCheckedKeys[item.id])
        })
        // console.log('this.datalist', this.datalist)
        this.list = JSON.parse(JSON.stringify(this.allProcessList))
      })
    },
    // checkbox + 手风琴效果
    handleCheck(item) {
      this.currentCheckedItem = item
      const idStr = item.id.toString()
      this.checkArray.push(idStr)
      switch (this.checkArray.length) {
        case 1:
          this.isCheck[idStr] = !this.isCheck[idStr]
          break
        case 2:
          if (this.checkArray[0] === this.checkArray[1]) {
            this.isCheck[idStr] = !this.isCheck[idStr]
          } else {
            this.isCheck[idStr] = !this.isCheck[idStr]
            for (const k in this.isCheck) {
              if (k !== idStr) {
                this.isCheck[k] = !this.isCheck[idStr]
              }
            }
          }
          break
        case 3:
          this.checkArray.shift()
          if (this.checkArray[0] === this.checkArray[1]) {
            this.isCheck[idStr] = !this.isCheck[idStr]
          } else {
            this.isCheck[idStr] = !this.isCheck[idStr]
            for (const k in this.isCheck) {
              if (k !== idStr) {
                this.isCheck[k] = !this.isCheck[idStr]
              }
            }
          }
          break
      }
      // if (this.isCheck[idStr]) {
      //   // 传入被点击制程index, 全选该制程的tree
      //   // let index = 0
      //   // this.list.forEach((ite, idx) => {
      //   //   if (ite.id === this.currentCheckedItem.id) {
      //   //     index = idx
      //   //   }
      //   // })

      //   // 从cookie中取出上次已选并赋值
      //   // 如果cookie中没有，则 全选
      //   const already = this.$Cookies.get('alreadyChecked')
      //   if (already) {
      //     const res = JSON.parse(already)
      //     if (res[this.currentCheckedItem.id]) {
      //       this.selectChecked(this.currentCheckedItem.id, res[this.currentCheckedItem.id], 'key')
      //     }
      //     // else {
      //     //  this.selectChecked(this.currentCheckedItem.id, this.list[index].list, 'node')
      //     // }
      //   }
      // }

      // 改变 preview title
      this.title = (this.isCheck[idStr] ? this.currentCheckedItem.name : '') + this.subTitle
    },
    // 左侧保存按钮（点击可预览）
    handleSave() {
      this.setEquiList = []
      if (this.currentCheckedItem.id === undefined) {
        this.$message({
          showClose: false,
          message: '尚未进行功能模块配置，请配置后再预览',
          type: 'error'
        })
        return false
      }
      // this.loading = true
      // tempTree : 当前勾选的tree
      const tempTree = this.datalist[+this.currentCheckedItem.id]
      // console.log('tempTree')
      // console.log(tempTree)
      // copyTree 去除 大屏和设备管理 两项
      const copyTree = tempTree.slice(2, tempTree.length)

      // 准备一个制程管理 父节点
      const processNode = {
        id: 100,
        label: '制程管理',
        parent: +this.currentCheckedItem.id,
        field: 'process-all',
        isShow: true,
        children: []
      }
      // 检查cookie中是否已存, 已有则加入
      // const checkedObject = this.$Cookies.get('checkedProcessObj')
      // if (checkedObject !== undefined) {
      //   processNode.children.push(...Object.values(JSON.parse(checkedObject)))
      // }

      // 当前勾选的制程
      const currentNode = {
        id: this.currentCheckedItem.id,
        label: this.currentCheckedItem.name,
        parentId: processNode.id,
        field: 'process-' + this.currentCheckedItem.id,
        children: []
      }

      // 所有选择的节点 通过 node 获取
      const allChecked = this.$refs['sideBarTree' + this.currentCheckedItem.id][0].getCheckedNodes()
      // 所有选择的节点 通过 key 获取
      const allKeys = this.$refs['sideBarTree' + this.currentCheckedItem.id][0].getCheckedKeys()
      // console.log('选中的节点node', allChecked)
      // console.log('选中的节点key(id)', allKeys)

      // 半选的父节点
      // this.halfFirstMenu = []
      allChecked.forEach(item => {
        // item.isShow = true
        if (allKeys.indexOf(item.parentId) === -1) {
          allKeys.push(item.parentId)
        }
        // this.halfFirstMenu.push(item.parentId)
      })
      console.log('allKeys', allKeys)
      // 获取菜单tree中所有父节点，即一级菜单
      const firstMenuList = []
      copyTree.forEach((item) => {
        // 如果有半选，则父级isShow = false
        // item.isShow = halfFirstMenu.indexOf(item.id) === -1
        // console.log(item)
        // console.log(this.currentCheckedItem.id)
        if (item.parentId === this.currentCheckedItem.id) {
          firstMenuList.push({
            id: item.id,
            label: item.label,
            parentId: item.parentId,
            isShow: false,
            field: item.field,
            children: []
          })
        }
      })
      // console.log('firstMenuList', firstMenuList)
      // debugger

      // 可视化大屏id
      let screenId = null
      // 大屏的模块组件
      let screenChild = []
      // 设备管理id
      let devManageId = null
      tempTree.forEach((item) => {
        if (item.label.indexOf('可视化大屏') !== -1) {
          screenId = item.id
          screenChild = [].concat(item.children)
        }
        if (item.label.indexOf('设备管理') !== -1) {
          devManageId = item.id
        }
      })

      // 该制程已勾选的 大屏模块
      const checkedScreen = []

      // 遍历所有勾选的节点
      allChecked.forEach((item, index) => {
        // 如果父级是设备管理，则添加到 当前制程子项
        if (item.parentId === devManageId) {
          currentNode.children.push(item)
          this.setEquiList.push({ lineId: item.id, isShow: true })
        }
        // 其余添加到firstMenuList对应元素的子节点中
        firstMenuList.forEach((menu, idx) => {
          if (item.parentId === menu.id) {
            // console.log(menu)
            // menu.isShow = true
            menu.children.push(item)
            return
          }
        })

        // 如果父级是可视化大屏，修改对应组件的显示or隐藏
        if (item.parentId === screenId) {
          checkedScreen.push(item.id)
        }
      })
      firstMenuList.forEach(val => {
        this.filterMenuShow(val, allKeys)
      })
      // 把预览的制程、线别id 存入vuex
      this.$store.dispatch('configInfo/changeProcess', currentNode.id)
      this.$store.dispatch('configInfo/changeLine', 0)

      const arr = JSON.parse(JSON.stringify(screenChild))
      arr.forEach(item => {
        item.isShow = false
      })
      checkedScreen.forEach(item => {
        arr.forEach((m, i) => {
          if (m.id === item) {
            m.isShow = true
            return
          }
        })
      })
      // 当前制程 添加至 制程管理 （判断是否已存在，存在则替换
      const tempProcess = this.$Cookies.get('checkedProcessList')
      if (tempProcess === undefined) {
        this.checkedProcessList = []
      } else {
        this.checkedProcessList = JSON.parse(tempProcess)
      }
      // console.log('已勾选的制程： ' + JSON.stringify(this.checkedProcessList))
      // console.log('currentNode ' + JSON.stringify(currentNode.id))
      if (this.checkedProcessList.indexOf(currentNode.id) === -1) {
        // console.log('没有 => push')
        processNode.children.push(currentNode)
      } else {
        // console.log('有 => splice')
        let index = null
        processNode.children.forEach((item, idx) => {
          if (item.id === currentNode.id) {
            index = idx
            return
          }
        })
        // *** 注意：利用数组 splice 方法，可以触发视图变化 （arr[1] = newItem 、 arr.length = 2 等数组操作无法触发视图变化）
        // arr.splice(index,howmany,newItem)
        processNode.children.splice(index, 1, currentNode)
      }

      // console.log(processNode.children)

      // processNode.children.push(currentNode)
      firstMenuList.unshift(processNode)
      console.log('firstMenuList', firstMenuList)
      // debugger
      this.checkedProcessList.push(currentNode.id)
      this.checkedProcessList = Array.from(new Set(this.checkedProcessList))
      this.$Cookies.set('checkedProcessList', this.checkedProcessList)
      this.checkedProcessObj[this.currentCheckedItem.id] = currentNode
      // 复制一份用于 预览菜单tree
      this.previewTree = JSON.parse(JSON.stringify(firstMenuList)).filter(val => {
        return val.isShow === true || (val.isShow === false && val.children.length > 0)
      })
      // console.log('previewTree', this.previewTree)
      // debugger
      // 保存后 展示大屏预览
      // const templine = currentNode.children.map(item => { return item.id })
      this.getDragList(arr)

      // 用cookie记录已选, 传入的是 已选项id list
      // this.recordSetting(allKeys)

      this.$Cookies.set('checkedProcessObj', this.checkedProcessObj)
    },
    filterMenuShow(val, allKeys) {
      val.isShow = allKeys.indexOf(val.id) !== -1
      if (val.children) {
        val.children.forEach(v => {
          this.filterMenuShow(v, allKeys)
        })
      }
    },
    // value: 已选项
    recordSetting(value) {
      // 把配置好的存入cookie
      this.alreadyChecked[this.currentCheckedItem.id] = value
      this.$Cookies.set('alreadyChecked', this.alreadyChecked)
    },
    /* 全选左侧展开的tree
    id： 已选制程的id
    nodelist： 已选项的值
    type： 用 'node' or 'key' 方式赋值
     */
    selectChecked(id, nodelist, type) {
      if (type === 'node') {
        this.$refs['sideBarTree' + id][0].setCheckedNodes(nodelist)
      } else if (type === 'key') {
        this.$refs['sideBarTree' + id][0].setCheckedKeys(nodelist)
      }
    },
    // 右侧导入按钮
    handleImport() {
      // 排序后，push大屏底图，传给后端
      const sortNewList = JSON.parse(JSON.stringify(this.dragList))
      sortNewList.push(this.lineImg)
      sortNewList.forEach((item, index) => {
        item['sort'] = index + 1
      })
      // sortNewList 是 排序后的大屏模块
      // console.log(sortNewList)
      sortNewList.forEach(mod => {
        this.setScreenObj[mod.field] = mod.isShow ? 1 : 0
        this.setScreenObj[mod.sortStr] = mod.sort
      })
      // console.log('已设好的大屏', this.setScreenObj)

      const newMenu = JSON.parse(JSON.stringify(this.previewTree))
      // console.log('newMenu', newMenu)
      // debugger
      this.setConf(newMenu)

      const equiArr = []
      this.setEquiList.forEach(line => {
        equiArr.push(line.lineId + ',' + (line.isShow ? 1 : 0))
      })
      // console.log('setEquiList', this.setEquiList)
      // console.log('equiArr', equiArr)
      this.setMenuObj['equi'] = equiArr.join(';')
      // console.log('已设好的其他', this.setMenuObj)
      // console.log('this.allConfiged', this.allConfiged)
      // console.log('this.currentCheckedItem.id', this.currentCheckedItem.id)
      // console.log('setMenuObj', this.setMenuObj)

      if (this.allConfiged[this.currentCheckedItem.id] === undefined) { // 没有配置就新增
        // this.setMenuObj['id'] = this.allConfiged[this.currentCheckedItem.id].id // config的id
        this.setMenuObj['regionid'] = this.currentCheckedItem.id // config的id
        // console.log(this.setMenuObj)
        const finalConObj = Object.assign({}, this.setScreenObj, this.setMenuObj)
        this.addConfig(finalConObj)
        // console.log(finalConObj)
      } else { // 已有配置就updata
        this.setMenuObj['id'] = this.allConfiged[this.currentCheckedItem.id].id // config的id
        this.setMenuObj['regionid'] = this.currentCheckedItem.id // config的id
        // console.log(this.setMenuObj)
        const finalConObj = Object.assign({}, this.setScreenObj, this.setMenuObj)
        this.editConfig(finalConObj)
        // console.log(finalConObj)
      }
      // this.countDownOut()
    },
    addConfig(finalConObj) {
      insertConfig(finalConObj).then(res => {
        if (res.code === '000000') {
          this.$message({
            type: 'success',
            message: '成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    editConfig(finalConObj) {
      updateConfig(finalConObj).then(res => {
        if (res.code === '000000') {
          this.$message({
            type: 'success',
            message: '成功!'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 递归设置传参的对象
    setConf(newMenu) {
      newMenu.forEach((val, index) => {
        if (index === 0) {
          // this.setMenuObj.id = this.allConfiged[val.parentId].id
          this.setMenuObj.regionid = val.parentId
        }
        this.setMenuObj[val.field] = val.isShow ? 1 : 0
        if (Object.prototype.hasOwnProperty.call(val, 'children')) {
          this.setConf(val.children)
        }
      })
    },
    // 页面跳转 倒计时
    countDownOut() {
      const msg = '秒后将跳转至大屏'
      const notice = this.$notify({
        title: '导入成功！',
        message: this.seconds + msg,
        type: 'success',
        showClose: false,
        duration: 0
      })
      const timer = setInterval(() => {
        this.seconds--
        notice.message = this.seconds + msg
        if (this.seconds === 0) {
          notice.close()
          clearInterval(timer)
          // this.logout()
          // // 清除cookie
          // this.$Cookies.remove('checkedProcessList')
          // this.$Cookies.remove('checkedProcessObj')
          // this.$Cookies.remove('alreadyChecked')
          this.$router.push({ path: '/dashboard' })
        }
      }, 1000)
    },
    async logout() {
      // console.log('logout')
      await this.$store.dispatch('user/logout')
      this.$router.push('/login')
    },
    // 获取大屏组件list, 即拖拽目标
    getDragList(arr) {
      const temp = JSON.parse(JSON.stringify(arr))
      // this.lineImg = temp[temp.length - 1]
      this.lineImg = temp.filter(val => {
        return val.field === 'map'
      })[0]
      temp.pop()
      this.dragList = JSON.parse(JSON.stringify(temp))
      this.dragList.sort(sortArrObj('sort'))
      // console.log('draglist', this.dragList)
      // 结束 loading
      this.loading = false
      // getComponentList().then(response => {
      //   const temp = response.data
      //   this.lineImg = temp[temp.length - 1]
      //   temp.pop()
      //   this.dragList = [].concat(temp)
      //   for (let i = 0; i < this.dragList.length; i++) {
      //     this.chartStyleList.push({
      //       width: '100%',
      //       height: '100%'
      //     })
      //   }
      // })
    },
    // 动态渲染组件
    iscomponent(index) {
      return this.dragList[index].component
    },
    // 拖拽方法
    handleDragStart(e, item) {
      this.dragging = item
      this.isMove = true
    },
    handleDragEnd(e, item) {
      this.dragging = null
    },
    // 首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
      // this.domResize()
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
      if (item === this.dragging) {
        return
      }
      const newItems = [...this.dragList]
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(item)

      newItems.splice(dst, 0, ...newItems.splice(src, 1))

      this.dragList = newItems

      // const sortArr = this.dragList.map((item) => { return item.id })
      // console.log(sortArr)

      this.isMove = false
    },
    // 引入组件 设置宽高
    domResize() {
      const that = this
      const dom = this.$refs.boxbodywrap
      dom.forEach((item, index) => {
        this.$erd.listenTo(item, function(element) {
          var width = element.clientWidth + 'px'
          var height = element.clientHeight + 'px'
          that.chartStyleList[index] = {
            width,
            height
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/screenPad.scss";
$sideLeft: 160px;

.tree-head{
  padding: 5px;
  background: rgb(102 191 238 / 20%);
}
.tree-box{
  margin-bottom: 5px;
}
// span + i 标签 模拟 checkbox
.checkbox{
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #5967a4;
  border-radius: 2px;
  text-align: center;
  line-height: 16px;
  box-sizing: content-box;
  font-size: 14px;
  &:hover{
    border-color:#0095e3;
  }
  i {
    transform: scaleY(0);
    transition: transform .15s ease-in .05s;
  }
}
.checkbox.checked{
  border-color:#0095e3;
  background-color: #0095e3;
  i {
    transform: scaleY(1);
  }
}
.rotate{
    transform: rotate(90deg);
    transition: transform .15s ease-in .05s;
}
.trangle {
    display: inline-block;
    width: 30px;
    text-align: center;
    cursor: pointer;
}

.conf-content{
  height: calc(100% - 40px);
  overflow: auto;
}

.preview-pad {
  position: relative;
  padding: 0;
  height: calc(100% - 45px);
  border-bottom: $boxBorder;
  overflow: auto;

.title-box{
  width: calc(100% - #{$sideLeft});
  margin-left: $sideLeft;
}

  section {
    width: 100%;
    height: calc(100% - 50px);

    .sideLeft {
      width: $sideLeft;
      border-top:1px solid cyan;
      border-right:1px solid #5967a4;
      overflow: auto;
    }
    .sideRight {
      height:100%;
      flex: 1;
      &.screenPad article.tab-box:nth-child(1){
        height: calc((100% - 40px) / 4);
        flex: auto;
      }
    }
  }
}

.bottom {
  padding: 5px 10px;
}

i.tips{
    font-style: normal;
    color: #bebebe;
    font-size: 12px;
    margin-left: 10px;

    i{
      font-size: 16px;
      color: #ccc;
    }
}

.cursorMove {
  cursor: move;

  &:hover{
    border: 1px dashed cyan;
  }
}

</style>
